﻿<!DOCTYPE html>
<html>
<head>
    <title>Game screens sample</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #fff;
        }

    </style>


    <script src="../../js/pixi3.dev.js"></script>
    <script src="../../dist/EZGUI.js"></script>
	<script src="./app-gui.js"></script>
</head>
<body>
    <script>
        var appWidth = 400;
        var appHeight = 640;
				

				
        var renderer = PIXI.autoDetectRenderer(appWidth, appHeight);
        renderer.backgroundColor = 0xffffff

        var guiContainer = new PIXI.Container();
        
        // add the renderer view element to the DOM
        document.body.appendChild(renderer.view);

        requestAnimationFrame(animate);
        function animate() {

            requestAnimationFrame(animate);
            renderer.render(guiContainer);
        }


        var mainScreen;
        var secondScreen;
        var thirdScreen;
		EZGUI.Theme.load(['../../assets/metalworks-theme/metalworks-theme.json'], function () {

		    mainScreen = EZGUI.create(mainScreenJSON, 'metalworks');

		    secondScreen = EZGUI.create(secondScreenJSON, 'metalworks');
		    secondScreen.visible = false;

		    thirdScreen = EZGUI.create(thirdScreenJSON, 'metalworks');
		    thirdScreen.visible = false;

			
		    guiContainer.addChild(mainScreen);
		    guiContainer.addChild(secondScreen);
		    guiContainer.addChild(thirdScreen);

			
			
			setupGUI();
		});

		function setupGUI() {
		    EZGUI.components.btNext1.on('click', function () {


		        secondScreen.position.x = appWidth;
		        secondScreen.visible = true;


		        mainScreen.animatePosTo(-appWidth, mainScreen.position.y, 800, EZGUI.Easing.Back.Out, function () {
		            mainScreen.visible = false;
		        });

		        secondScreen.animatePosTo(0, secondScreen.position.y, 800, EZGUI.Easing.Back.Out, function () {
		            //dlg1.visible = false;
		        });

		    });
		    EZGUI.components.btPrev2.on('click', function () {

		        mainScreen.position.x = -appWidth;
		        mainScreen.visible = true;

		        secondScreen.animatePosTo(appWidth, secondScreen.position.y, 800, EZGUI.Easing.Back.Out, function () {
		            secondScreen.visible = false;
		        });


		        mainScreen.animatePosTo(0, mainScreen.position.y, 800, EZGUI.Easing.Back.Out, function () {

		        });

		    });

		    EZGUI.components.btNext2.on('click', function () {


		        thirdScreen.position.x = appWidth;
		        thirdScreen.visible = true;


		        secondScreen.animatePosTo(-appWidth, secondScreen.position.y, 800, EZGUI.Easing.Back.Out, function () {
		            secondScreen.visible = false;
		        });

		        thirdScreen.animatePosTo(0, thirdScreen.position.y, 800, EZGUI.Easing.Back.Out, function () {
		            //dlg1.visible = false;
		        });

		    });


		    EZGUI.components.btPrev3.on('click', function () {

		        secondScreen.position.x = -appWidth;
		        secondScreen.visible = true;

		        thirdScreen.animatePosTo(appWidth, thirdScreen.position.y, 800, EZGUI.Easing.Back.Out, function () {
		            thirdScreen.visible = false;
		        });


		        secondScreen.animatePosTo(0, secondScreen.position.y, 800, EZGUI.Easing.Back.Out, function () {

		        });

		    });

		}





        
    </script>
    <script src="../../js/ga.js"></script>
</body>
</html>
